<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="index">
<head>
<meta charset="UTF-8"/>
<script src="/bootstrap-3.3.7-dist/index.js"></script>

<script>
var mqtt1=null;

function closemqtt(){
	mqtt1.end();
	mqtt1=null;
	alert("close");
}
function openmqtt(){
	
	if(mqtt1!=null){
		mqtt1.end();
		mqtt1=null;
	}
	//if($('#ClientId').val()==""){
		//alert("请输入ClinetId");
		//return
	//}
	var clientId="WB";
	var topic = $('#topic').val();
	var topicType = "/"+$('#topicType').val();
	var deviceType = "/"+$('#deviceType').val();
	var deviceid=null;
	if($('#deviceid').val()==''){
		deviceid='/#'
	}else{
		deviceid = "/"+$('#deviceid').val();
	}
	
	
	var TopicString='';
	mqtt1=connectMq(clientId,'#mqttMessige');
	
	if($('#topicType').val()=='ALL'){
		       mqtt1.subscribe(topic+"/HB"+deviceType+deviceid, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+"/HB"+deviceType+deviceid);
			 			TopicString+=topic+"/HB"+deviceType+deviceid+'///';
			         }
			  
			       });
		       mqtt1.subscribe(topic+"/RG"+deviceType+deviceid, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+"/RG"+deviceType+deviceid);
			 			TopicString+=topic+"/RG"+deviceType+deviceid+'///';
			         }
			  
			       });
		       mqtt1.subscribe(topic+"/LC"+deviceType+deviceid, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+"/LC"+deviceType+deviceid);
			           TopicString+=topic+"/LC"+deviceType+deviceid+'///';
			         }
			  
			       });	
		       mqtt1.subscribe(topic+"/AL"+deviceType+deviceid, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+"/AL"+deviceType+deviceid);
			 			TopicString+=topic+"/AL"+deviceType+deviceid+'///';
			         }
			  
			       });	
		       mqtt1.subscribe(topic+"/CM"+deviceType+deviceid, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+"/CM"+deviceType+deviceid);
			 			TopicString+=topic+"/CM"+deviceType+deviceid+'///';
			         }
			  
			       });
		       mqtt1.subscribe(topic+"/CM/C"+deviceid, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+"/CM"+deviceType+deviceid);
			 			TopicString+=topic+"/CM"+deviceType+deviceid+'///';
			         }
			  
			       });
	}else if($('#topicType').val()=='#'){
		alert('ALL2');
		       mqtt1.subscribe(topic+topicType, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+topicType);
						 TopicString+=topic+"/#"+deviceType+deviceid+'///';
			         }
			  
			       });		
	}else if($('#topicType').val()=='ALL1'){
		alert('全局');
		       mqtt1.subscribe(topic+"/ALL", { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+topicType);
						 TopicString+=topic+"/ALL"+'///';
			         }
			  
			       });	
	}else{
		alert('ALL3');
		       mqtt1.subscribe(topic+topicType+deviceType+deviceid, { qos: 0 }, function (err) {
			         if (!err) {
			           console.log("订阅成功"+topic+topicType+deviceType+deviceid);
					  TopicString+=topic+topicType+deviceType+deviceid+'///';
			         }
			  
			       });			
	}

	
	$('#mqttMessige').empty();
	//alert(TopicString);
	
}

function sendmqtt(){
	if(mqtt1==null){
		alert("MQTT未订阅，请先订阅");
	}
	
	$('#mqttMessige').empty();
	var cmdType=$('#cmdType').val();
	var cmdDeviceId=null;
	if($('#cmdDeviceId').val()==''){
		cmdDeviceId='/#'
	}else{
		cmdDeviceId = "/"+$('#cmdDeviceId').val();
	}
	switch(cmdType){
	case "2":
		mqtt1.publish("/CEIEC/ECHAINS/CM/C"+cmdDeviceId,"{'TYPE':'GP',BODY:['SHB']}", { qos: 0 }, function (err){
			if (!err){
				alert('发送成功');
			}
		});
		break;
	case "1":
		mqtt1.publish("/CEIEC/ECHAINS/CM/C"+cmdDeviceId,"{'TYPE':'GP','BODY':['SHB','REL','LLP','LOST','LCT','AREP','MONITOR']}", { qos: 0 }, function (err){
			if (!err){
				alert('发送成功');
			}
		});
		break;
	}
}

function StopMq(){
	if(Stop){
		Stop=false;
		$('#stop').empty();
		$('#stop').append("开始");
	}else{
		Stop=true;
		$('#stop').empty();
		$('#stop').append("暂停");
	}
	
	
}
</script>



<style type="text/css">
	.resultclass{
		width: 800px;
		height:440px;
	}
</style>

</head>
<body >
<div layout:fragment="content" class="content">
		<ol class="breadcrumb" th:object="${funplace}">
			<li th:text="*{funplace1}"><a href="#">系统管理</a></li>
			<li th:text="*{funplace2}"><a href="#">用户管理</a></li>
			<li th:text="*{funplace3}" class="active">用户添加</li>
		</ol>
		
			<div class="selectForm">
				<button  class="btn btn-success " onclick="openmqtt()">开始订阅</button>
				&nbsp;&nbsp;
				<button type="button" class="btn btn-danger" id="stop"  onclick="StopMq()">暂停</button>
				&nbsp;&nbsp;
				<button type="button" class="btn btn-danger"  onclick="closemqtt()">取消订阅</button>
				&nbsp;&nbsp;
				<input type="text" value="/CEIEC/ECHAINS" class="clear1"  readonly="readonly" name="topic" id="topic"  placeholder="/CEIEC/ECHAINS/" />
				<select name="topicType" id="topicType">
				<option value="ALL">全部类型订阅</option>
				  <option value ="AL">AL</option>
				  <option value ="LC">LC</option>
				  <option value="HB">HB</option>
				  <option value="RG">RG</option>
				  <option value="CM">CM</option>
				  <option value="BK">BK</option>
				  <option value="ALL1">ALL</option>
				  <option value="#">#</option>
				</select>
				
				<select name="deviceType" id="deviceType">
				  <option value ="S">S</option>	 
				  <option value ="H">H</option>
				  <option value="B">B</option>
				  <option value="M">M</option>
				  <option value="P">P</option>
				  <option value="R">R</option>
				  <option value="F">F</option>
				  <option value="A">A</option>
				  
				
				</select>
				<input type="text" class="clear1"  name="deviceid" id="deviceid" placeholder="请输入完整设备ID" />
				
				&nbsp;&nbsp;
				<button type="button" class="btn btn-danger"  onclick="sendmqtt()">发送命令</button>

				<input type="text" class="clear1"  name="cmdDeviceId" id="cmdDeviceId" placeholder="请输入查询设备ID" />
				<select name="cmdType" id="cmdType">
				  <option value ="1">设备基本参数</option>
				  <option value ="2">查询设备心跳</option>

				</select>
			</div>




	

      <table class="table">


      <tbody id="mqttMessige">




      </tbody>



    </table>



</div>



</body>

</html>
